<style lang="stylus" type="text/stylus">
  @import 'unbundlingUnit.styl';
</style>

<template>
  <div class="unit-item-card card-com policyMatchRightList">
    <div class="card-con-com"
         @drop='unUnitiDrop($event,itemIndex)'
         @dragover='unUnitiAllowDrop' v-for="(item,itemIndex) in unbundlingUnitData" :key="item.id">
      <div class="left">
        <Input class="unit-description" v-model="item.title" type="textarea" :autosize="true" placeholder="请填写问题描述"/>
        <ButtonGroup class="unit-tools">
          <Button class="untied">
            <div draggable="true"
                 @mouseenter="unitedToChartEnter()"
                 @mouseleave="unitedToChartLeave()"
                 @dragstart="unUnitiDrag($event,itemIndex)"><i class="iconfont icon-line_2"></i></div>
          </Button>
          <Button @click="addChartFirst(item,itemIndex)" class="untied"><i class="iconfont icon-line_1"></i></Button>
          <Button @click="delUnited(itemIndex)" class="del" icon="android-close"></Button>
        </ButtonGroup>
      </div>
      <div class="right">
        <ul class="unit-problem-list">
          <li v-for="(items,index) in item.answers" :key="index" class="unit-problem-list-li">
            <Input v-model="items.content" placeholder="无">
            </Input>
            <div class="problem-child-tools">
              <ButtonGroup>
                <Button draggable='true'
                        class="drag"><i class="iconfont icon-shangxia"></i></Button>
                <Button class="del" icon="android-close"></Button>
              </ButtonGroup>
            </div>

          </li>
        </ul>
        <span @click="addUntiedAnswers(item.answers)" class="btn-add"><Icon type="android-add"></Icon></span>
      </div>
    </div>
    <div class="btn-add-down btn-add-com">
      <span @click="addUnbind" class="btn-add"><Icon
        type="android-add"></Icon></span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

  export default {
    name      : "unbundlingUnit",
    data() {
      return {};
    },
    props     : ["unbundlingUnitData", "chartToUnUnit"],
    computed  : {},
    methods   : {
      unUnitiDrag(e, index) {
        this.$emit("dragUnUnitToChart", {
          obj  : this.unbundlingUnitData[index],
          index: index
        });
        this.unitedToChartEnter();
      },
      unUnitiDrop(e, index) {
        this.unUnitiAllowDrop(e);
        this.$emit("getUnUnitToChart", {
          obj  : this.unbundlingUnitData[index],
          index: index,
          arr  : this.chartToUnUnit
        });
        setTimeout(() => {
          this.lineOfPoint();
        }, 50);
      },

      unUnitiAllowDrop(e) {
        e.preventDefault();
      },
      addUnbind() {
        this.$emit("unUnitItem", [
          {
            id      : "",
            position: "",
            title   : "",
            answers : []
          }
        ]);
      },
      addChartFirst(item, itemIndex) {
        this.$emit("unUnitToChartFirts", {
          item,
          itemIndex
        });
      },
      addUntiedAnswers(item) {
        item.push({
          id      : "",
          position: "",
          content : "",
          problems: [],
          prizes  : []
        });
      },
      unitedToChartEnter() {
        const chart = document.querySelectorAll(".unit-problem-list-li");
        for (let v of chart) {
          v.querySelector(".ivu-input").className = "ivu-input selected";
        }
      },
      unitedToChartLeave() {
        const chart = document.querySelectorAll(".unit-problem-list-li");
        for (let v of chart) {
          v.querySelector(".ivu-input").className = "ivu-input";
        }
      },
      delUnited(index) {
        this.unbundlingUnitData.splice(index, 1);
      },
      pointLine() {
        this.$emit("pointLine", {});
      },
      lineOfPoint() {
        this.$emit("pointLine", {});
      }
    },
    mounted() {},
    created() {}
  };
</script>
